Ext.define('Bible.view.VersesList', {
    extend: 'Ext.List',
    xtype: 'verseslist',
    requires: [
        'Ext.data.Store'
        //'Ext.field.ChapterPicker'
    ],

    config: {
        value: false,

        fullscreen: true,
        styleHtmlContent: true,
        scrollable: true,
        itemTpl: '<strong><sup>{vnumber}</sup></strong> {text}',
        cls: 'verseslist',
        store: {
            fields: [
                {name: 'id', type: 'int'},
                {name: 'cnumber', type: 'int'},
                {name: 'vnumber', type: 'int'},
                {name: 'text', type: 'string'},
                {name: 'title', type: 'string'},
                {name: 'ref', type: 'string'},
                // user specific changes
                {name: 'comment', type: 'string'},
                {name: 'bgcolor', type: 'string'},
                {name: 'keyverse', type: 'string'}
            ],
            //autoLoad: true,
            proxy: {
                type: 'ajax',
                url: '../servlets/chapters.php?action=get_chapter',
                enablePagingParams: false,
                extraParams: {
                    book: 1,
                    chapter: 1
                },
                reader: {
                    type: 'array',
					rootProperty: 'data'
                }
            }
        }
    },

    initialize: function() {
        this.callParent();

        if(this.getValue()){
            //<debug>
            console.debug('has default value', this.getValue());
            //</debug>
            this.setPage(this.getValue());
        }

        this.on({
            scope: this,
//            itemtaphold: this.onItemTapHold
            itemswipe: this.onItemSwipe
        });
    },

    onItemSwipe: function(dataView, index, target, record, e, eOpts){
        //<debug>
        console.debug('onItemSwipe', record, record.direction);
        //</debug>
        if(record.direction == 'right'){
            this.movePrevious();
        } else if(record.direction == 'left'){
            this.moveNext();
        }
    },

    /**
     * Move to the previous page, has the same effect as clicking the 'previous' button.
     */
    movePrevious : function(){
        var o = this.getValue();
        if (o.chapter > 1) {
            o.chapter--;
        } else if(o.book > 1){
            o.book--;
            o.chapter = booksRecords[o.book - 1][2];
        }
        this.setPage(o);
    },

    /**
     * Move to the next page, has the same effect as clicking the 'next' button.
     */
    moveNext : function(){
        var o = this.getValue();
        if (o.chapter < booksRecords[o.book - 1][2]) {
            o.chapter++;
        } else if(o.book < 66){
            o.book++;
            o.chapter = 1;
        }
        this.setPage(o);
    },

//    onItemTapHold: function(){
//        console.debug('onItemTapHold');
//        this.setPage({
//            book: 1,
//            chapter: 2
//        });
//    },

    setPage: function(params, verse){
        //<debug>
        console.debug('setPage params', params);
        //</debug>
        var me = this,
            store = me.getStore(),
            proxy = store.getProxy(),
            record = booksRecords[params.book - 1],
            book = record[3] || record[1],
            title;

//		book = book.length > 4 ? book.substring(0, 3) : book;

		title = book + ' ' + params.chapter;
        proxy.setExtraParams(params);
        me.setValue(params);
//        proxy.setExtraParam('book', params.book);
//        proxy.setExtraParam('chapter', params.chapter);

        me.fireEvent('pagechange', me, params, title);
        if(me.tab) {
            //<debug>
            console.debug('set title', title);
            //</debug>
            me.tab.setTitle(title);
        }

        store.load();
    }
});